<template>
  <view id="main" class="content">
    <view class="top_bg">
      <image src="@/static/img/home/banner.png" />
    </view>
    <view class="card">
      <uni-section class="mb-10" title="管理" titleFontSize="24" type="line">
      </uni-section>
      <view class="controls_list">
        <view class="item" @tap="goOtherPage(item)" v-for="item in memberStore.controls_list" :key="item.id">
          <view class="bg">
            <image :src="`../../static/img/home/${item.img}`" />
          </view>
          <text>
            {{ item.naem }}
          </text>
        </view>
        <!-- <view class="item" @tap="goBlueTooth()">
          <view class="bg">
            <image src="@/static/icon/sm.png" />
          </view>
          <text>
            蓝牙
          </text>
        </view> -->
      </view>
    </view>
    <view class="card">
      <uni-section class="mb-10" title="管理" titleFontSize="24" type="line">
      </uni-section>
      <view class="controls_list">
        <view class="item" @tap="goOtherPage(item)" v-for="item in memberStore.inventory_list" :key="item.id">
          <view class="bg">
            <image :src="`../../static/img/home/${item.img}`" />
          </view>
          <text>
            {{ item.naem }}
          </text>
        </view>
      </view>
    </view>
    <view class="card detail">
      <uni-section class="mb-10" title="详情" titleFontSize="24" type="line">
      </uni-section>
      <view class="controls flex">
        <view class="empty">
          <image class="medium_Icon" src="@/static/img/home/pic_blank_default.png" />
          <view class="color_text_gray fs_12"> 暂无数据 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useMemberStore } from "@/stores/modules/member";
const memberStore = useMemberStore();
// 跳转蓝牙页面
const goBlueTooth = () => {
  uni.navigateTo({
    url: "/pages/bluetooth/index",
  });
};
// 跳转其他页面
const goOtherPage = (item: any) => {
  uni.navigateTo({
    url: item.path,
  });
};
</script>

<style lang="scss">
::v-deep .uni-section-header__decoration {
  background-color: #0077FF !important;
}

.content {
  height: 100vh;

  .top_bg {
    width: 100vw;
    padding: 0 20px;

    image {
      width: 100%;
      height: 140px;
    }
  }

  .card {
    margin: 20px 0;

    .controls_list {
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 13px;
        color: #1D2541;
        margin: 10px;

        .bg {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: 4px;

          image {
            width: 64px;
            height: 64px;
          }
        }
      }
    }
  }

  .detail {
    padding-bottom: 40px;

    .controls {
      justify-content: center;
      padding: 20px;

      .empty {
        text-align: center;

        image {
          width: 100px;
          height: 100px;
        }
      }
    }
  }
}
</style>
